import React from 'react';
import { Button as MuiButton } from '@mui/material';
import { motion } from 'framer-motion';
import { styled } from '@mui/material/styles';

// 使用Framer Motion增强的按钮
const MotionButton = motion(MuiButton);

// 样式化的按钮
const StyledButton = styled(MotionButton)(({ theme, variant }) => ({
    borderRadius: '8px',
    padding: '10px 24px',
    fontSize: '16px',
    fontWeight: 600,
    textTransform: 'none',
    boxShadow: variant === 'contained' ? '0 4px 14px 0 rgba(0, 118, 255, 0.39)' : 'none',
    transition: 'all 0.3s ease',
    position: 'relative',
    overflow: 'hidden',
    '&:hover': {
        boxShadow: variant === 'contained' ? '0 6px 20px rgba(0, 118, 255, 0.39)' : 'none',
        transform: 'translateY(-2px)',
    },
    '&:after': {
        content: '""',
        position: 'absolute',
        width: '100%',
        height: '100%',
        top: 0,
        left: 0,
        pointerEvents: 'none',
        backgroundImage: variant === 'contained' ?
            'radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 80%)' :
            'none',
        opacity: 0,
        transition: 'opacity 0.4s ease',
    },
    '&:active:after': {
        opacity: 1,
    }
}));

const Button = ({ children, variant = 'contained', ...props }) => {
    return (
        <StyledButton
            variant={variant}
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
            transition={{ type: 'spring', stiffness: 500 }}
            {...props}
        >
            {children}
        </StyledButton>
    );
};

export default Button; 